Create digital wireframes in Figma 在 Figma 中建立數字線框圖

準備工作

開始之前，先把你畫在紙上的草圖上傳到Figma，這樣可以對照著做。

1. 開啟Figma登入後進入主頁面。

2. 上傳草圖照片
   • 點選"File"選單，選擇"Place Image"
   • 選擇你拍好的草圖照片

     或者直接把照片從資料夾拖到Figma裡

3. 放好參考圖把草圖放在畫布旁邊，方便隨時檢視。

開始製作電腦版線框圖

1. 建立手機框架

點選工具欄裡的"#"圖示

選擇"Android"（如果你要設計安卓手機介面）

螢幕上會出現一個手機形狀的框，你可以在裡面開始設計

2. 做頂部導航欄

用矩形工具在頂部畫一個橫條，這就是導航欄

畫選單圖示（三條橫線）：

• 選擇線條工具

• 按住Shift鍵畫直線

• 複製兩次，用方向鍵調整位置

• 用紅色參考線對齊

新增Logo佔位：畫一個灰色方塊代表Logo位置

新增使用者頭像：用圓形代表頭像，加幾條線畫一個簡單的小人圖示

3. 新增圖片輪播區

畫一個大矩形代表輪播圖位置

在矩形裡畫一個"X"，表示這裡以後會放圖片

新增小圓點：畫三個黑色小圓，放在矩形底部中間

4. 新增標題

• 選擇文字工具，畫一個文字框

• 輸入標題，比如："latest tips to train your dog"

• 把字型調成24號，讓文字居中

5. 新增按鈕

• 畫一個矩形當按鈕

• 在中間加上文字"Schedule"

• 按鈕要夠大，方便使用者點選

製作遛狗員列表

1. 新增小標題

寫上"dog walkers near you"，用24號字型

2. 畫分隔線

• 用線條工具畫黑色直線

• 複製多條線，用"對齊左邊"和"垂直均勻分佈"功能排列整齊

3. 新增遛狗員資訊

• 用圓形代表頭像

• 畫兩條線代表文字：短線代表名字，長線代表其他資訊

• 把線條調粗一點（粗細設為5）

• 把這一組複製多次，放在各個區域

在 Figma 中建立數字線框圖